<script setup>
import { ref, onMounted } from 'vue';

import { updateNetorkInfo } from '@/share/constants';
import { ElButton } from 'element-plus';
import QrCodeGenerator from '@/components/qrcode/clientEntry.vue';
import SoftwareInfoDrawer from '@/components/systemInfo/SoftwareInfoDrawer.vue';

const networkInfo = ref({ ip: '', serverPort: '', clientPort: '', hostname: '', email: '', serial: '' })

const hostName = ref('示例系统名称')
const serialNumber = ref('示例系统版本')
const email = ref('用户名/手机号')

const clientUrl = ref('');

// 删除原有的抽屉相关代码，只保留状态控制
const showSoftwareDrawer = ref(false);

// 新增显示控制状态
const showQRCode = ref(true)
const qrGeneratorRef = ref(null)

// 切换显示状态
const toggleQRCode = () => {
    showQRCode.value = !showQRCode.value
}

// 强制刷新二维码
const refreshQRCode = () => {
    if (qrGeneratorRef.value) {
        qrGeneratorRef.value.refresh()
    }
}


onMounted(async () => {
    try {
        networkInfo.value = await updateNetorkInfo()
        console.log('system-info get ipaddress::', networkInfo.value);

        const hostIP = networkInfo.value.ip;
        const clientIP = networkInfo.value.clientPort;

        clientUrl.value = `http://${hostIP}:${clientIP}/#/client/home?st=${networkInfo.value.serverPort}`;

        refreshQRCode(); // 刷新二维码

        hostName.value = networkInfo.value.hostname
        serialNumber.value = networkInfo.value.serial
        email.value = networkInfo.value.email

    } catch (error) {
        console.error('获取网络信息失败:', error)
    }

})
</script>

<template>
    <div id="system-info">
        <h1>系统信息</h1>
        <p>用户名: {{ email }}</p>
        <p>计算机名: {{ hostName }}</p>
        <p>激活码: {{ serialNumber }}</p>
        <p>网络信息: {{ networkInfo.ip }}:{{ networkInfo.serverPort }}</p>
        <!-- 可以根据需要添加更多系统信息 -->
        <el-button type="primary" @click="showSoftwareDrawer = true">软件信息</el-button>
    </div>
    <div class="qr-code-section">
        <h4>手机客户端访问二维码:</h4>
        <!-- 新增控制按钮 -->
        <el-button type="primary" @click="toggleQRCode">
            {{ showQRCode ? '关闭二维码' : '显示二维码' }}
        </el-button>

        <el-button @click="refreshQRCode">
            刷新二维码
        </el-button>

        <QrCodeGenerator ref="qrGeneratorRef" :text="clientUrl" :visible="showQRCode" />
        <p>或访问: {{ clientUrl }}</p>
    </div>

    <!-- 使用组件 -->
    <SoftwareInfoDrawer v-model:visible="showSoftwareDrawer" />
</template>

<style scoped>
#system-info {
    padding: 20px;
}

h1 {
    font-size: 24px;
    margin-bottom: 20px;
}

p {
    font-size: 16px;
    margin-bottom: 10px;
}
</style>
